<template>
  <div class="updatename-container">
    <van-field
      v-model="nikaName"
      autosize
      type="textarea"
      maxlength="11"
      show-word-limit
    />
    <van-cell class="tips-wrap">
      <div slot="title" class="tips">支持中英文, 数字</div>
      <van-button size="mini" type="info" @click="onConfirm">确定</van-button>
    </van-cell>
  </div>
</template>
<script>
import { editUserProfile } from '@/api/user'
export default {
  name: 'UpdateName',
  data () {
    return {
      nikaName: this.value
    }
  },
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    // 确定修改个人昵称
    async onConfirm () {
      // 保存提示
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true
      })
      try {
        // 调用接口, 修改昵称
        await editUserProfile({
          name: this.nikaName
        })

        // 修改成功, 提示
        this.$toast.success({
          message: '保存成功',
          forbidClick: true
        })
        // 向父组件发射自定义方法, 修改父组件nikaname
        this.$emit('input', this.nikaName)
        // 向父组件发射自定义方法, 关闭弹层
        this.$emit('close')
      } catch (err) {
        if (err && err.response && err.response.status === 409) {
          this.$toast({
            message: '用户名已存在',
            forbidClick: true
          })
        }
      }
    }
  },
  created () {}
}
</script>
<style lang="less">
.updatename-container{
  padding: 16px;
  background: #f5f7f9;
  .tips-wrap{
    background: #f5f7f9;
    .tips{
      font-size: 12px;
    }
  }
}
</style>
